<template >
  <div v-if="data">
    <div class="audioOverLay" @click="lay()"  >
      <div class="radius">
        <div class="small"></div>
      </div>
    </div>
 <!-- @canplay="durations" -->
 <audio ref="audio" :src="data.audio" @canplay="durations">
  <!-- <source :src="data.audio" type="audio/ogg">
  <source :src="data.audio" type="audio/mpeg">
  您的浏览器不支持 audio 元素 -->
</audio>
    <!-- 播放器遮罩层 -->
    <van-overlay :show="show" v-if="data.json_content">
      <div class="wrapper" @click.stop="show = false">
        <div class="block" @click.stop>
          <div style="color:#BBBBBB;font-size:14px">{{data.title}}</div>
          <div class="Progressbar">
            <div class="Bared" ref="barss">
              <div class="radiusN"></div>
            </div>
            <!-- 音频时间 -->
            <div class="timers">{{timer}}</div>
          </div>
          <div  style="color:#BBBBBB" class="layanchor">{{data.json_content.author.authors[0].name
          }}</div>
          <div class="audiocontrol" @click="play()">
            <img src="@/assets/fill_media_previous.png" alt="">
            <div class="playControl">  
              <van-icon name="pause-circle-o" size="30" v-if="open === false"/>
              <van-icon name="play-circle-o" size="30" v-else/>
            </div>
            <img src="../assets/fill_media_next.png" alt="">
          </div>
          <div class="leftandright">
      
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
 props:['data','open'],
 data(){
  return{
    show:false,
    opens:null,
    timer: '',
  }
 },
 methods:{
   // lay 播放器遮罩层方法
   lay(){
      this.show = true
    },
    play(){
      console.log("传过来的数据",this.open);
      if(this.open){
        this.$refs.audio.play()
        this.opens = setInterval(() => {
          this.durations()
          console.log('循环中');
        }, 1000)
        this.$emit('change',false)
      }else{
        this.$refs.audio.pause()
        clearInterval(this.opens)
        this.$emit('change',true)
      }
    },
    // durations() {
    //   let total = parseInt(this.$refs.audio.duration) - parseInt(this.$refs.audio.currentTime)
    //   let minute = total % 60
    //   let seconds = (total - minute) / 60
    //   this.timer = seconds + ':' + (minute < 10 ? '0'+minute : minute)
    //   //  console.log("这是一份是多少",parseInt(this.$refs.audio.currentTime/this.$refs.audio.duration)*100) 错误的
    //   // console.log('播放状态', this.$refs.audio.paused);

    //   this.gobar()
    // },
    durations() {
      let total = parseInt(this.$refs.audio.duration) - parseInt(this.$refs.audio.currentTime)
      let minute = total % 60
      let seconds = (total - minute) / 60
      this.timer = seconds + ':' + (minute < 10 ? '0'+minute : minute)
      //  console.log("这是一份是多少",parseInt(this.$refs.audio.currentTime/this.$refs.audio.duration)*100) 错误的
      // console.log('播放状态', this.$refs.audio.paused);

      this.gobar()
    },
    gobar() {
      console.log('触发了');
      let i = (this.$refs.audio.currentTime / this.$refs.audio.duration) * 100
      console.log(i);
      // this.$refs.bars.style.width = i + '%'
      this.$refs.barss.style.width = i + '%'
    }
 }
}
</script>

<style lang="less" scoped>
.audioOverLay{
  position: fixed;
  top: 60px;
  right: 0;
  width: 30px;
  height: 10px;
  background: gray;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  .radius{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #000000;
    position: relative;
    .small{
  
      position: absolute;
      width: 2px;
      height:2px;
      border-radius: 50%;
      background: #fff;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
 }

 .wrapper {
  height: 100%;
  z-index: 999999;
}

.block {
  width: 100%;
  height: 140px;
  background-color: #fff;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  .Progressbar{
    width:100%;
    height: 2px;
    background: gray;
    margin: 10px 0 15px 0 ;
    position: relative;
    .Bared{
       position: absolute;
       top: -2px;
       left: 0;
       width: 0%;
       height: 5px;
       background: palegreen;
       border-top-right-radius: 10px;
       border-bottom-right-radius: 10px;
     
      
    }
    .timers{
      text-align:right;
      padding-top: 5px;
      font-size: 12px;
    }
    
  }
  .layanchor{
    font-size: 12px;
  }


  .audiocontrol{
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 10px;
     .playControl{
      margin:0 10px;
     }
     img{
      width: 20px;
      height: 20px;
     }
  }
  .leftandright{
    display: flex;
    justify-content: space-between;
  }
}
</style>